{% extends "layout.html" %}
{% block body %}
<link rel="stylesheet" type="text/css" href="../static/DataTables1.10.18/DataTables-1.10.18/css/dataTables.bootstrap.min.css"/>
<script type="text/javascript" src="../static/DataTables1.10.18/DataTables-1.10.18/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="../static/DataTables1.10.18/DataTables-1.10.18/js/dataTables.bootstrap.min.js"></script>

<link rel="stylesheet" type="text/css" href="../static/DataTables1.10.18/Buttons-1.5.4/css/buttons.dataTables.css">
<link rel="stylesheet" type="text/css" href="../static/DataTables1.10.18/Buttons-1.5.4/css/buttons.bootstrap.css">
<script src="../static/DataTables1.10.18/Buttons-1.5.4/js/dataTables.buttons.min.js"></script>
<script src="../static/DataTables1.10.18/Buttons-1.5.4/js/buttons.bootstrap.js"></script>
{#<script src="../static/DataTables1.10.18/JSZip-2.5.0/jszip.min.js"></script>#}
<script src="../static/DataTables1.10.18/Buttons-1.5.4/js/buttons.html5.min.js"></script>



<style>
.dataTable td {padding: 2px !important;}
table.dataTable thead tr:nth-child(1) td {padding-right: 30px !important;}
table.dataTable thead .sorting:after, table.dataTable thead .sorting_asc:after, table.dataTable thead .sorting_desc:after, table.dataTable thead .sorting_asc_disabled:after, table.dataTable thead .sorting_desc_disabled:after
{ bottom: 2px;}
#tbl tbody td:nth-child(1){cursor: pointer;}
#tbl tbody td:nth-child(2){cursor: pointer;}
#tbl tbody td:nth-child(3){cursor: pointer;color: #2b669a;}
#tbl tbody td:nth-child(9){white-space: nowrap;}
#tbl tbody td:nth-child(10){word-break: break-all;}
.TreeMiddle {display: none}
.TreeMiddle,.TreeMiddleBtn {text-decoration: underline;cursor: pointer;}
.TreeMiddleBtn:after {content: "...";}
#tbl_wrapper .btn-group {margin-right: 10px}
</style>
List of taxonomy administrators :
{% for A in g.AdminLists %}
  {% if not loop.first %}- {% endif %}<a href="mailto:{{ A.email }}?subject=EcotaxoServer%20help%20request">{{ A.name }}</a>
  {% endfor %} <br>
Clic on ID and ParentID to set Parent filter. Click on display name to show and edit entry.
  <a href="?" class="btn btn-primary btn-xs"><i class="fas fa-eraser"></i> Clear filter</a>
<table id="tbl" style="width:100%" class="table table-striped table-bordered" >
<thead>
  <tr><td>ID</td><td>Parent ID</td><td>Display name</td><td>Type</td><td>Status</td>
  <td>Creator</td><td>Source ID</td><td>Creation Date</td><td>Last update</td><td>Lineage</td>
  </tr>
</thead>
<tbody>
{% for l in lst %}
  <tr><td>{{l.id}}</td><td>{{l.parent_id}}</td><td>{{l.name}}</td><td>{{l.taxotype}}</td><td>{{l.taxostatus}}</td>
  <td>{{l.creator_email or ''}}</td><td>{{l.id_source or ''}}</td><td>{{l.creation_datetime or ''}}</td><td>{{l.lastupdate_datetime}}</td><td>{{l.tree}}</td>
  </tr>
{% endfor %}
</tbody>
</table>
<script>
$(document).ready(function() {
    $('#tbl thead tr').clone(true).appendTo( '#tbl thead' );

    var table=$('#tbl').DataTable( {
        scrollY:        '70vh',
        scrollCollapse: true,
        paging:         true,
        pageLength:200,
        orderCellsTop: true,
        fixedHeader: true,
        deferLoading: {{nbrtaxon}},
        dom: '<"top">rt<"bottom"B i p><"clear">',
{#        buttons: ['copy', 'csv', 'excel',{text:'Full TSV Export'#}
        buttons: ['copy',{text:'Full TSV Export'
              ,action: function ( e, dt, node, config ) { window.location='/browsetaxotsvexport/'; } }],
        processing: true,
        serverSide: true,
        orderMulti: false,
        ajax: {url:'/browsetaxo/ajax',
              type: "POST",
              columns: [{ data: 0 },{ data: 1 },{ data: 2 },{ data: 3 },{ data: 4 },{ data: 5 },{ data: 6 },{ data: 7 },{ data: 8 },{ data: 9 } ]},
        columnDefs: [
           { width:'40px', targets: 0 }
          ,{ width:'60px', targets: 1 }
          ,{ width:'30px', targets: 3 }
          ,{ width:'30px', targets: 4 }
        ]

    });

    $('.dataTables_scrollHead thead tr:eq(1) td').each( function (i) {
            var title = $(this).text();
            if(title==='Type')
            $(this).html( '<select style="width:100%"><option/><option value="P">P</option><option value="M">M</option></select>' )
                  .find('select').css('height',$(this).closest('tr').find('td').eq(0).css('height'));
            else if(title==='Status')
            $(this).html( '<select style="width:100%"><option/><option value="A">A Active</option><option value="D">D Deprecated</option><option value="N">N Not reviewed</option></select>' )
                  .find('select').css('height',$(this).closest('tr').find('td').eq(0).css('height'));
            else
            $(this).html( '<input type="text" title="Search '+title+'" style="width:100%"/>' );

            $( 'input,select', this ).on( 'keyup change', function () {
                if ( table.column(i).search() !== this.value ) {
                    table
                        .column(i)
                        .search( this.value )
                        .draw();
                }
            } );
        } );

    $('#tbl tbody').on('click','td:nth-child(3)',function () {
      var taxoid=$(this).closest('tr').find('td:nth-child(1)').text();
{#      At2Confirm("View taxon "+taxoid,"content",{onok:function(){console.log('ok');}})#}
      At2PopupWaitOpenLoad(0,"/browsetaxoviewpopup/"+taxoid,"View taxon "+taxoid);
    })
    .on('click','td:nth-child(1),td:nth-child(2)',function () {
      var taxoid=$(this).text();
      if(taxoid==='') taxoid='0';
      $('.dataTables_scrollHead thead tr:eq(1) td:nth-child(1) input').val('').change();
      $('.dataTables_scrollHead thead tr:eq(1) td:nth-child(2) input').val(taxoid).change();
    })
    .on('click','.TreeMiddle,.TreeMiddleBtn',function () {
      $(this).closest('td').find('.TreeMiddle,.TreeMiddleBtn').toggle();
    });
} );

</script>
{% endblock %}